<script setup>
import {ref,onMounted} from 'vue'
import { getTaskListApi } from '@/apis/task'
// 任务列表
const taskList = ref([])
// 任务列表是否为空
const isEmpty = ref(true)
// 是否隐藏下拉图标
const scrollFlag = ref(false)
// 默认page
const nextPage = ref(2)
// 接口返回的当前页数
const nowPage = ref(999)
// 节流
const flag = ref(false)

onMounted(() => {
  getTaskList()
})
// 得到任务列表的方法
const getTaskList = async() => {
  const res = await getTaskListApi()
  console.log(res);
  taskList.value = res.data.items
  isEmpty.value = res.data.items.length === 0
}

// 下拉刷新被触发
const onScrollRefresh = async() => {
  scrollFlag.value = true
  await getTaskList()
  scrollFlag.value = false
}

// 下拉到底部触发
const onScrollBottom = async() => {
  if (nextPage.value>nowPage.value) return
  if(flag.value) return
  flag.value = true
 const res = await getTaskListApi({page:nextPage.value})
 flag.value = false
 nextPage.value++
 nowPage.value = Number(res.data.pages)
 taskList.value = [...taskList.value,...res.data.items]

}
</script>

<template>
  <scroll-view scroll-y refresher-enabled @refresherrefresh="onScrollRefresh" 
  @scrolltolower="onScrollBottom"
  :refresher-triggered="scrollFlag" 
  class="scroll-view">
    <view class="scroll-view-wrapper">
      <view class="task-card" v-for="item in taskList" :key="item.id" >
        <navigator hover-class="none" :url="`/subpkg_task/detail/index?id=${item.id}`">
          <view class="header">
            <text class="no">任务编号: {{ item.transportTaskId
 }}</text>
            <!-- <text class="status">已延迟</text> -->
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line"
                >{{ item.startAddress}}</view
              >
              <view class="line">{{ item.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{ item.planDepartureTime }}</view>
          <navigator
          v-if="item.enablePickUp"
            hover-class="none"
            :url="`/subpkg_task/pickup/index?id=${item.id}`"
            class="action"
            >提货</navigator>
            <navigator
            v-else
            disabled
            hover-class="none"
            :url="`/subpkg_task/pickup/index?id=${item.id}`"
            class="action"
            >提货</navigator>
        </view>
      </view>
      <view v-if="isEmpty" class="task-blank">无待提货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
